import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})
//做移动端适配
// export default defineConfig({
//   //...其他配置
// css: {
//   //...其他配置
//   postcss: {
//     plugins: [
//       require("autoprefixer"),
//       require("postcss-px-to-viewport")({
//         viewportWidth: 750,  //视窗的宽度，对应的是我们设计稿的宽度，一般是750
//         viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
//         unitPrecision: 3,       // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
//         viewportUnit: 'vw',     // 指定需要转换成的视窗单位，建议使用vw
//         selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
//         minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
//         mediaQuery: false       // 允许在媒体查询中转换`px`
//       })
//     ]
//   }
// }
// })

const path = require('path');
// vite.config.js # or vite.config.ts
console.log(path.resolve(__dirname, './src'))
module.exports = {
  plugins: [react()],
  "resolve.alias": {
    // 键必须以斜线开始和结束
    '/@/': path.resolve(__dirname, './src')
  },
  hostname: '127.0.0.1',
  port: 3000,
  // 是否自动在浏览器打开
  open: true,
  // 是否开启 https
  https: false,
  // 服务端渲染
  ssr: false,
  /**
  * 在生产中服务时的基本公共路径。
  * @default '/'
   */
  base: './',
  /**
   * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
   * @default 'dist'
   */
  outDir: 'dist',
  // 反向代理，此处应该特别注意，网上很多教程是直接设置proxy，并没有向官网那样添加 server，可能会导致失败，vite官网：https://vitejs.dev/guide/features.html#async-chunk-loading-optimization
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:2345',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}